﻿@using DevExtreme.NETCore.Demos.Models

<div class="desc-container">
    Right-click (or&nbsp;touch and hold) the "Relative Sales" field
    and select an&nbsp;item from the appeared context menu to&nbsp;change the
    <b>"summaryDisplayMode"</b> option.
</div>

@(Html.DevExtreme().PivotGrid<Sale>()
    .AllowSortingBySummary(true)
    .AllowSorting(true)
    .AllowExpandAll(true)
    .ShowBorders(true)
    .FieldChooser(c => c.Enabled(false))
    .FieldPanel(p => p.ShowFilterFields(false).AllowFieldDragging(false).Visible(true))
    .OnContextMenuPreparing("contextMenu_preparing")
    .DataSource(d => d
        .Store(s => s.Mvc().Controller("PivotGridData").LoadAction("Get"))
        .Fields(fields => {
            fields.AddFor(m => m.Region)
                .Width(120)
                .Area(PivotGridArea.Row);

            fields.AddFor(m => m.City)
                .Width(150)
                .Area(PivotGridArea.Row);

            fields.AddFor(m => m.Date)
                .Area(PivotGridArea.Column);

            fields.Add()
                .GroupName("Date")
                .GroupInterval(PivotGridGroupInterval.Year)
                .Expanded(true);

            fields.AddFor(m => m.Amount)
                .Caption("Relative Sales")
                .SummaryType(SummaryType.Sum)
                .Area(PivotGridArea.Data)
                .SummaryDisplayMode(PivotGridSummaryDisplayMode.PercentOfColumnGrandTotal);
        })
    )
)

<script>
    var summaryDisplayModes = [
        { text: "None", value: "none" },
        { text: "Absolute Variation", value: "absoluteVariation" },
        { text: "Percent Variation", value: "percentVariation" },
        { text: "Percent of Column Total", value: "percentOfColumnTotal" },
        { text: "Percent of Row Total", value: "percentOfRowTotal" },
        { text: "Percent of Column Grand Total", value: "percentOfColumnGrandTotal" },
        { text: "Percent of Row Grand Total", value: "percentOfRowGrandTotal" },
        { text: "Percent of Grand Total", value: "percentOfGrandTotal" }
    ];

    function contextMenu_preparing(e) {
        var dataSource = e.component.getDataSource();
        if(e.field && e.field.dataField === "Amount") {
            $.each(summaryDisplayModes, function(_, summaryDisplayMode) {
                var summaryDisplayModeValue = summaryDisplayMode.value;

                e.items.push({
                    text: summaryDisplayMode.text,
                    selected: e.field.summaryDisplayMode === summaryDisplayModeValue,
                    onItemClick: function() {
                        var format,
                            caption = summaryDisplayModeValue === "none" ? "Total Sales" : "Relative Sales";
                        if(summaryDisplayModeValue === "none"
                            || summaryDisplayModeValue === "absoluteVariation") {
                            format = "currency";
                        }
                        dataSource.field(e.field.index, {
                            summaryDisplayMode: summaryDisplayModeValue,
                            format: format,
                            caption: caption
                        });

                        dataSource.load();
                    }
                });
            });
        }
    }
</script>
